<template>
  <!-- This footer should be hidden by default and shown when there are todos -->
  <footer class="footer" v-show="count">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      ><strong>{{ leftTodos }}</strong> item left</span
    >
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <router-link active-class="selected" to="/home">All</router-link>
      </li>
      <li>
        <router-link active-class="selected" to="/active">Active</router-link>
      </li>
      <li>
        <router-link active-class="selected" to="/completed">Completed</router-link>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button
      class="clear-completed"
      @click="delallsync"
      v-show="isShowClearCompleted"
    >
      Clear completed
    </button>
  </footer>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  name: 'TodoFooter',
  computed: {
    ...mapState('todoMvcModel', ['todoList', 'showState']),
    ...mapGetters('todoMvcModel', [
      'count',
      'leftTodos',
      'isShowClearCompleted',
    ]),
  },
  methods: {
    ...mapActions('todoMvcModel', ['delallsync']),
  },
}
</script>

<style></style>
